﻿  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    // Fait du div artisteDialog une boite mobile masquee et modale
    $("#realisateur").autocomplete({
      // Source des données à suggérer (ajoute à l'URL ?term=ce que l'utilisateur a saisi)
      source: "artistes-suggeres.json",
      delay: 20, // ms
      minLength: 0 // nb min de caracteres saisis
    });
  });
  </script>
</head>

<body>
<form id="creerFilm" action="javascript:">
  <fieldset style="display: inline">
    <legend>Film</legend>
    <table>
      <tr>
        <td>Titre</td>
        <td><input name="titre" id="titre"/></td>
      </tr>
      <tr>
        <td>Genre</td>
        <td>
          <select name="genre" id="genre">
            <option value="C">Comédie</option>
            <option value="D">Drame</option>
            <option value="J">Jeunesse</option>
            <option value="O">Comédie dramatique</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Réalisateur</td>
        <td>
          <input type="text" id="realisateur"/>
          <input type="hidden" id="idRealisateur" name="idRealisateur"/>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
          <button id="insertFilm">Insérer</button>
        </td>
      </tr>
    </table>
  </fieldset>
  <div id="message">Zone de message</div>
</form>
